import { createStore } from 'vuex';

export default createStore({
  state: {
    points: [], // 初始状态下 points 数组为空
    photoData: {
      comparison: '',
      outline: '',
      prediction: ''
    }, // 初始状态下 photoData 为空对象
    leftImage: '', // 初始状态下 leftImage 为空
    rightImage: '' // 初始状态下 rightImage 为空
  },
  getters: {
    points: state => state.points, // getter 用来获取 state 中的 points 数组
    photoData: state => state.photoData, // getter 用来获取 state 中的 photoData 对象
    leftImage: state => state.leftImage, // getter 用来获取 state 中的 leftImage
    rightImage: state => state.rightImage // getter 用来获取 state 中的 rightImage
  },
  mutations: {
    // mutation 用来修改 state 中的 points 数组
    SET_POINTS(state, points) {
      state.points = points;
    },
    ADD_POINT(state, point) {
      state.points.push(point);
    },
    UPDATE_POINT(state, { index, point }) {
      state.points.splice(index, 1, point);
    },
    REMOVE_POINT(state, index) {
      state.points.splice(index, 1);
    },
    RESET_AND_SET_POINTS(state, points) {
      state.points = []; // 清空 points 数组
      state.points.push(...points); // 添加多个新元素
    },
    // mutation 用来修改 state 中的 photoData 对象
    SET_PHOTO_DATA(state, photoData) {
      state.photoData = photoData;
    },
    UPDATE_PHOTO_COMPARISON(state, comparison) {
      state.photoData.comparison = comparison;
    },
    UPDATE_PHOTO_OUTLINE(state, outline) {
      state.photoData.outline = outline;
    },
    UPDATE_PHOTO_PREDICTION(state, prediction) {
      state.photoData.prediction = prediction;
    },
    // mutation 用来设置和更新左侧和右侧的图片数据
    SET_LEFT_IMAGE(state, image) {
      state.leftImage = image;
    },
    SET_RIGHT_IMAGE(state, image) {
      state.rightImage = image;
    }
  },
  actions: {
    // action 用来触发 mutation 来修改 points 数组
    setPoints({ commit }, points) {
      commit('SET_POINTS', points);
    },
    addPoint({ commit }, point) {
      commit('ADD_POINT', point);
    },
    updatePoint({ commit }, { index, point }) {
      commit('UPDATE_POINT', { index, point });
    },
    removePoint({ commit }, index) {
      commit('REMOVE_POINT', index);
    },
    resetAndSetPoints({ commit }, points) {
      commit('RESET_AND_SET_POINTS', points);
    },
    // action 用来触发 mutation 来修改 photoData 对象
    setPhotoData({ commit }, photoData) {
      commit('SET_PHOTO_DATA', photoData);
    },
    updatePhotoComparison({ commit }, comparison) {
      commit('UPDATE_PHOTO_COMPARISON', comparison);
    },
    updatePhotoOutline({ commit }, outline) {
      commit('UPDATE_PHOTO_OUTLINE', outline);
    },
    updatePhotoPrediction({ commit }, prediction) {
      commit('UPDATE_PHOTO_PREDICTION', prediction);
    },
    // action 用来触发 mutation 来设置和更新左侧和右侧的图片数据
    setLeftImage({ commit }, image) {
      commit('SET_LEFT_IMAGE', image);
    },
    setRightImage({ commit }, image) {
      commit('SET_RIGHT_IMAGE', image);
    }
  },
  modules: {}
});